import React, {useEffect, useState, useRef} from 'react'
import {NavigationStackScreenComponent} from 'react-navigation-stack'
import {View, ScrollView, Text, TouchableOpacity, Image} from 'react-native'
import {commonStyle, definedColors, translateSize} from 'styles'
import {recognitionListStyle} from './styles'
import {loginOut, operate, setLogin} from '../../services/authorization'
import assets from '../assets'
import {RadiusButton, Toast} from '../../components'
import Pickier from 'react-native-picker'
import Modal from 'react-native-modal'

const ConfirmFundScreen: NavigationStackScreenComponent<{
  data: any
  onNext: () => void
}> = props => {
  const [visible, setVisible] = useState(false)
  const [cashVisible, setCashVisible] = useState(false)

  const FundInfo = () => {
    return (
      <View>
        <View>
          <Text style={{color: '#fff'}}>本次收款金额合计</Text>
          <Text style={{color: '#fff', fontSize: translateSize(40), fontWeight: 'bold'}}>
            ¥ 49,999.00
          </Text>
        </View>
        <View
          style={{
            backgroundColor: '#fff',
            paddingHorizontal: translateSize(32),
            borderRadius: translateSize(10),
            marginTop: translateSize(30),
          }}>
          <View
            style={{
              paddingVertical: translateSize(18),
              borderBottomColor: '#D8D8D8',
              borderBottomWidth: 1,
              flexDirection: 'row',
            }}>
            <Text style={{color: '#767676'}}>客户姓名：</Text>
            <Text style={{color: '#1A1A1A'}}>王百万</Text>
          </View>
          <View
            style={{
              paddingVertical: translateSize(18),
              borderBottomColor: '#D8D8D8',
              borderBottomWidth: 1,
              flexDirection: 'row',
            }}>
            <Text style={{color: '#767676'}}>身份证号：</Text>
            <Text style={{color: '#1A1A1A'}}>44011219860210098X</Text>
          </View>
          <View
            style={{
              paddingVertical: translateSize(18),
              flexDirection: 'row',
            }}>
            <Text style={{color: '#767676'}}>电话号码：</Text>
            <Text style={{color: '#1A1A1A'}}>15920398477</Text>
          </View>
        </View>
        <View
          style={{
            backgroundColor: '#fff',
            paddingHorizontal: translateSize(32),
            borderRadius: translateSize(10),
            marginTop: translateSize(30),
          }}>
          <View
            style={{
              paddingVertical: translateSize(18),
              borderBottomColor: '#D8D8D8',
              borderBottomWidth: 1,
              flexDirection: 'row',
            }}>
            <Text style={{color: '#1A1A1A'}}>广州叠溪花园 二期 朱村二期 1-203</Text>
          </View>
          <View
            style={{
              paddingVertical: translateSize(18),
              flexDirection: 'row',
            }}>
            <Text style={{color: '#767676'}}>筹金金额：</Text>
            <Text style={{color: '#1A1A1A'}}>49,999.00</Text>
          </View>
        </View>
      </View>
    )
  }
  return (
    <View style={{...commonStyle.containerColumn, minHeight: '100%'}}>
      <ScrollView>
        <View style={{...commonStyle.containerColumn, padding: translateSize(32)}}>
          <FundInfo />
          <View
            style={{
              backgroundColor: '#fff',
              paddingHorizontal: translateSize(32),
              borderRadius: translateSize(10),
              marginTop: translateSize(30),
            }}>
            <View
              style={{
                paddingVertical: translateSize(18),
                borderBottomColor: '#D8D8D8',
                borderBottomWidth: 1,
                flexDirection: 'row',
              }}>
              <Text style={{color: '#767676'}}>入账银行：</Text>
              <TouchableOpacity
                style={{
                  flexDirection: 'row',
                }}
                onPress={() => {
                  Pickier.init({
                    pickerData: ['银行1', '银行2'],
                    pickerConfirmBtnText: '确认',
                    pickerCancelBtnText: '取消',
                    pickerTitleText: '选择类型',
                    onPickerConfirm: item => {},
                  })
                  Pickier.show()
                }}>
                <Text style={{color: '#0256FF'}}>切换</Text>
                <Image
                  style={{
                    width: translateSize(40),
                    height: translateSize(40),
                  }}
                  source={assets.images.icon_arrow_down_blue}
                />
              </TouchableOpacity>
            </View>
            <View
              style={{
                paddingVertical: translateSize(18),
                flexDirection: 'row',
              }}>
              <Text style={{color: '#1A1A1A'}}>中国工商银行股份有限公司广州天河支行</Text>
            </View>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: translateSize(30),
            }}>
            <RadiusButton
              style={{
                backgroundColor: '#FFCC1D',
                width: '30%',
              }}
              onPress={() => {
                setCashVisible(true)
              }}>
              <Text
                style={{
                  color: '#fff',
                  fontSize: translateSize(28),
                }}>
                现金支付
              </Text>
            </RadiusButton>
            <RadiusButton
              style={{
                backgroundColor: '#7AC142',
                width: '30%',
              }}
              onPress={() => {}}>
              <Text
                style={{
                  color: '#fff',
                  fontSize: translateSize(28),
                }}>
                扫码支付
              </Text>
            </RadiusButton>
            <RadiusButton
              style={{
                backgroundColor: '#EE4037',
                width: '30%',
              }}
              onPress={() => {
                setVisible(true)
              }}>
              <Text
                style={{
                  color: '#fff',
                  fontSize: translateSize(28),
                }}>
                刷卡支付
              </Text>
            </RadiusButton>
          </View>
        </View>
      </ScrollView>

      <Modal
        isVisible={visible}
        onBackButtonPress={() => {
          setVisible(false)
        }}>
        <View
          style={{
            width: '100%',
            backgroundColor: '#fff',
            borderRadius: translateSize(10),
            padding: translateSize(20),
          }}>
          <Text style={{paddingVertical: translateSize(20)}}>
            中国工商银行股份有限公司广州天河支行
          </Text>
          <Text style={{paddingVertical: translateSize(20)}}>银行账号：***************</Text>
        </View>
        <RadiusButton
          style={{
            backgroundColor: '#EE4037',
            width: '100%',
            marginTop: translateSize(30),
          }}
          onPress={() => {}}>
          <Text
            style={{
              color: '#fff',
              fontSize: translateSize(28),
            }}>
            确定
          </Text>
        </RadiusButton>
      </Modal>
      <Modal
        isVisible={cashVisible}
        onBackButtonPress={() => {
          setCashVisible(false)
        }}>
        <FundInfo />
        <View
          style={{
            width: '100%',
            backgroundColor: '#fff',
            borderRadius: translateSize(10),
            padding: translateSize(20),
            marginTop: translateSize(30),
          }}>
          <Text style={{paddingVertical: translateSize(20)}}>入账银行：中国工商银行股份</Text>
          <Text style={{paddingVertical: translateSize(20)}}>银行账号：***************</Text>
        </View>
        <RadiusButton
          style={{
            backgroundColor: '#EE4037',
            width: '100%',
            marginTop: translateSize(30),
          }}
          onPress={() => {}}>
          <Text
            style={{
              color: '#fff',
              fontSize: translateSize(28),
            }}>
            确定
          </Text>
        </RadiusButton>
      </Modal>
    </View>
  )
}

ConfirmFundScreen.navigationOptions = props => {
  return {
    title: '确认款项',
    headerStyle: {
      margin: translateSize(0),
      elevation: 0,
      borderBottomWidth: 1,
      borderBottomColor: '#212447',
      backgroundColor: '#212447',
    },
    headerRight: (
      <TouchableOpacity
        style={recognitionListStyle.headerRight}
        onPress={() => {
          operate()
          props.navigation.getParam('onNext')()
        }}>
        <Text style={recognitionListStyle.headerFont}>确认</Text>
      </TouchableOpacity>
    ),
  }
}

export default ConfirmFundScreen
